# Cursor 保姆级教程：一篇搞定 AI 编程第一课

AI 编程工具的竞争已经进入了白热化阶段，国外有 Cursor、Claude Code、Codex 三巨头，国内有字节的 TRAE、阿里的 Qoder、腾讯的 CodeBuddy 三剑客。

其中，Cursor 算是我最早为之付费的产品了，虽然现在它因为价格等原因被人诟病，但仍然是非常能打的主流 AI 编程工具，而且更新嘎嘎快。

![](https://pic.yupi.icu/1/1_cursor.png)

我自己用 Cursor 做了不少项目，烧的钱也最多。这篇文章我会从安装开始，带你用 Cursor 从 0 做出一个完整的网站项目，完整走一遍 AI 编程的流程。看完之后，你就能用 Cursor 独立完成各种 AI 编程任务了。

干货密集，建议先收藏，找个安静的地方慢慢食用~



## 1、安装和基础准备

### 下载安装

打开 [Cursor 官网](https://cursor.com)，网站会自动识别你的操作系统，直接下载安装包，一路点下一步就行了，跟装微信一样简单。

![](https://pic.yupi.icu/1/image-20260604161516577.png)

安装完成后打开 Cursor，先注册一个账号。建议用 GitHub 账号来注册登录，因为后面做项目的时候会用到 GitHub 来管理代码和部署上线，提前关联好会方便很多。

![](https://pic.yupi.icu/1/image-20260604161539548.png)



### 两种界面

Cursor 提供了两套操作界面。

一套叫 Agent Window，是不是有点眼熟？

跟你平时用的 AI 聊天工具长得差不多，左边管理对话和项目，中间跟 AI 聊天，适合新手上手。

![](https://pic.yupi.icu/1/image-20260604161607946.png)

另一套叫 Editor Window，就是一个完整的代码编辑器界面，左边看文件、中间写代码、右边跟 AI 对话、底部打开终端，适合管理复杂的代码项目。

![](https://pic.yupi.icu/1/image-20260604161653209.png)

两种界面可以同时打开、随时切换。我建议新手先从 Agent Window 开始用，界面更简洁，上手零门槛。等你对 Cursor 熟悉了，再切到 Editor Window。



### 免费版和付费版

Cursor 默认提供免费的 Hobby 套餐，可以体验基本的 AI 对话功能，但模型能力和使用额度都有限制。

如果你要认真学 AI 编程，建议至少开通 Pro 套餐，每月 20 美元（约 150 元人民币）。更高级的 Pro+ 和 Ultra 套餐主要是增加了用量额度，功能上跟 Pro 是一样的，不够用了再升级就行。

![](https://pic.yupi.icu/1/image-20260604161759761.png)



### 选择 AI 模型

Cursor 的 Pro 用户可以自由选择 AI 模型。Cursor 支持 Claude、GPT、Gemini、Grok 等国外主流大模型，你可以在对话面板的模型选择器里一键切换，还能调节模型的推理等级。

![](https://pic.yupi.icu/1/image-20260604161830863.png)

不知道选什么的话，直接用 Auto 模式就好，Cursor 会自动帮你选合适的模型，既省心又省钱。等你熟练了之后，可以根据任务复杂度手动切换，比如简单任务用便宜快速的模型，复杂任务切到更强的模型。

![](https://pic.yupi.icu/1/image-20260604161906303.png)

好了，基础准备搞定了，接下来正式体验 Cursor 的 AI 能力。



## 2、认识 Cursor 的几种能力

### Agent 模式初体验

新开一个对话，默认就是 Agent 模式。这是 Cursor 最核心、最常用的模式，AI 可以自己分析需求、创建文件、调用工具、写代码、运行命令，一条龙完成任务。

先来个简单的，让 AI 帮你做一份 AI 编程热点的网页报告：

```plain
今天有哪些值得关注的 AI 编程热点？
总结为一份 HTML 网页报告
```

AI 会自动联网搜索最新信息，然后帮你整理总结，生成一份 HTML 网页文件。

![](https://pic.yupi.icu/1/image-20260604161950784.png)

看看效果，只需要跟 AI 说一句话，天下热点尽在你手~

![](https://pic.yupi.icu/1/image-20260604162054901.png)



### 其他交互方式

除了 Agent 模式，Cursor 还有几种轻量的交互方式。

Ask 模式是纯问答，执行速度快，但是不能修改文件，适合你想了解某个知识点、或者让 AI 解释一段代码的时候用。

![](https://pic.yupi.icu/1/image-20260604162242454.png)

用编辑器模式写代码的时候，AI 还会自动预测你下一步要写什么，按 Tab 就能接受建议，形成「Tab, Tab, Tab」的连续补全节奏。

![](https://pic.yupi.icu/1/image-20260604162414383.png)

选中一段代码按 `Cmd+K`（Mac）或 `Ctrl+K`（Windows），还能弹出一个小对话框，直接让 AI 在当前位置修改代码，更轻量。

![](https://pic.yupi.icu/1/image-20260604162514930.png)

不过有了 Agent 模式之后，大多数情况你已经不需要自己动手写代码了。Agent 模式才是 Cursor 真正的杀手锏，接下来我们用它做一个完整的编程项目。



## 3、AI 编程实战 - 网页总结工具

### 搞清楚要做什么

做项目的第一步始终是需求分析，先搞清楚你要做什么。

这个工具的功能很简单，就是用户输入一个网址，AI 自动提取网页内容并生成摘要总结，帮你快速理解一篇文章的核心内容，省去逐字阅读的时间。

像我平时要大量阅读国外的技术博客和新闻，有了这个工具就方便多了。



### Plan 模式 - 先想清楚再动手

创建一个空文件夹作为项目目录，注意路径最好是纯英文的，中文路径有时候会导致一些奇怪的兼容问题。

然后在 Cursor 的 Editor Window 中打开这个文件夹，在对话面板里把模式切换到 Plan（按 `Shift+Tab` 可以快速切换模式）。

![](https://pic.yupi.icu/1/image-20260604162640727.png)

Plan 模式的好处是 AI 会先帮你想清楚怎么做，生成一份实施计划，确认没问题后再动手写代码。这样可以避免 AI 一上来就乱写一通。

我假设自己什么技术都不懂，直接把需求丢给 AI：

```plain
帮我开发一个网页总结工具，功能如下：

1. 用户在页面上输入一个网址
2. 点击按钮后，自动提取该网页的内容
3. 然后用 AI 对内容进行总结概括，生成简洁的摘要
4. 支持中英文网页，结果都用中文展示
5. 界面要简洁美观，有加载动画

请先帮我规划一下整体的技术方案和实施步骤
```

AI 会分析需求，有任何不确定的地方会弹窗找你确认。然后输出一份详细的实施计划，包括技术选型、文件结构、任务列表。你不需要看懂计划里提到的每个技术名词，大致扫一遍觉得合理就行。

![](https://pic.yupi.icu/1/image-20260604162743435.png)



### Agent 自主开发

确认计划没问题后，点击对话中的「Build」按钮，AI 就开始按照计划自主执行了。

它会自动创建项目文件、编写前端页面、写后端接口、配置 AI 模型调用。如果计划中有多个可以同时进行的步骤，Cursor 还可能会启动多个子 Agent 并行工作，加快速度。

![](https://pic.yupi.icu/1/image-20260604162815059.png)

几分钟后，AI 完成了开发，还会自动运行项目，并且在 Cursor 内置的浏览器面板中自动打开网页，你可以直接预览效果，不用切到外部浏览器。

![](https://pic.yupi.icu/1/image-20260604162844304.png)



### 测试验证

项目跑起来之后，AI 会告诉你需要准备什么。由于我们的项目使用了 DeepSeek 大模型的 API 来做总结，需要先去 DeepSeek 开放平台获取一个 API Key，填到项目的环境变量文件里。

![](https://pic.yupi.icu/1/image-20260604162915371.png)

然后试试看效果。我输入一篇文章的网址，点击总结按钮，很快 AI 就给出了总结，还是很到位的。

![](https://pic.yupi.icu/1/image-20260604162946718.png)

但是我发现有些网站的内容无法正常提取和总结……

![](https://pic.yupi.icu/1/image-20260604163108311.png)

人工一个个测试太麻烦了，我们可以让 AI 自己来测试和修复。

输入 `@Browser` 使用 Cursor 内置的 Browser Use 浏览器操控功能，让 AI 自主测试：

```plain
请你自主测试和修复 AI 提取和总结功能，确保兼容大多数网站
比如当我输入 https://ai.codefather.cn 时，报错：未提取到足够正文
```

![](https://pic.yupi.icu/1/image-20260604163149159.png)

AI 先分析了当前的代码，然后通过终端命令尝试复现 Bug，修复了代码，还开了一个子 Agent 来打开浏览器自动验证。

![](https://pic.yupi.icu/1/image-20260604163216526.png)

修复完成后再试一次，这次就能够正常总结了。

![](https://pic.yupi.icu/1/image-20260604163242010.png)

每次任务执行完成后，你可以查看代码改动，按需保留或者撤销部分修改，也可以直接点击 Keep 保留全部改动。建议每验证完成一个功能就 Keep 一下。

![](https://pic.yupi.icu/1/image-20260604163307654.png)



### 迭代优化

AI 编程的核心思路就是「先完成再迭代」，第一版做出来之后，通过多轮对话不断调整，直到满意为止。

这个过程中，有几个 Cursor 的核心技巧值得一提。



#### 用 @ 引用精准提供上下文

在对话框里输入 `@`，可以让 AI 精准地参考你指定的内容。比如 `@文件名` 引用项目中的某个文件，`@Docs` 引用已索引的官方文档，`@Terminals` 引用当前终端的报错信息。

![](https://pic.yupi.icu/1/image-20260604163359832.png)

比如你要用 Ant Design 组件库来美化网站，可以用 `@Docs` 引入 Ant Design 的官方文档，AI 就能基于最新的文档来编写代码，避免编造过时的写法。

你也可以直接把文件拖拽到对话框里。比如我把自己的产品信息文档拖进来，AI 在做底部版权推荐的时候就知道该展示什么信息了。

![](https://pic.yupi.icu/1/image-20260604163419853.png)

Cursor 还支持直接把图片拖进对话框。比如你觉得苹果官网的设计风格好看，截张图粘进来让 AI 参考着修改就行。

![](https://pic.yupi.icu/1/image-20260604163438613.png)

执行上述提示词后，网站被优化成了下面这样，还不错吧~

![](https://pic.yupi.icu/1/image-20260604163550109.png)



#### Checkpoints 快照回滚

多轮修改的过程中，难免会遇到 AI 越改越乱、或者一个 Bug 始终解决不了的情况。

这时候用 Cursor 的快照回滚功能就好了。Agent 每次修改都会自动保存一个快照，你只要把鼠标悬停在对话记录中之前某条消息上，点击回滚图标，就能一键恢复到那个时间点的代码状态。

![](https://pic.yupi.icu/1/image-20260604163729304.png)

就像游戏里的存档功能，搞砸了可以读档重来。



#### 查看用量

做了这么多操作，消耗了多少 AI 额度呢？

在对话框的右下角可以看到当前对话的上下文使用情况，包括消耗了多少 Token 和各部分占比，一目了然。

![](https://pic.yupi.icu/1/image-20260604163751198.png)

你也可以打开 [Cursor 后台面板](https://cursor.com/dashboard) 查看一段时间的消耗明细，建议给每月的按需用量加个上限，防止破产。

![](https://pic.yupi.icu/1/image-20260604163907596.png)

恭喜你，到这里你已经用 AI 从 0 做出了一个完整的网页应用！



## 4、让 Cursor 更强 - 扩展能力

Cursor 本身已经很强了，但它还有一套扩展体系，可以让 AI 连接外部工具、获取最新信息、遵守你的编码规范。

![Cursor 插件系统](https://pic.yupi.icu/1/image-20260604163937041.png)



### MCP - 让 AI 连接外部世界

MCP 的全称是 Model Context Protocol，听起来很唬人，但你可以把它理解为 AI 的万能插头。原本 AI 只能根据训练数据来回答问题、生成代码，但有了 MCP，它就能连接各种外部工具和数据源，比如查天气、操作数据库、规划出行路线。

![](https://pic.yupi.icu/1/mcp%E6%9E%B6%E6%9E%84%E5%9B%BE.png)

比如安装高德地图的 MCP，只需要去高德开放平台申请一个 API Key，然后在 Cursor 设置里配置一下就行：

```json
{
  "mcpServers": {
    "amap-maps": {
      "url": "https://mcp.amap.com/mcp?key=你的API_KEY"
    }
  }
}
```

![](https://pic.yupi.icu/1/image-20260604164139668.png)

配置完成后，能够在 Cursor 设置面板中看到 MCP Server 提供的工具列表：

![](https://pic.yupi.icu/1/image-20260604164305442.png)

来试一试，直接跟 AI 说：用高德地图帮我规划一次周末上海两日游，查一下明天天气，推荐适合的景点。

![](https://pic.yupi.icu/1/image-20260604164341317.png)

AI 就会自动调用高德地图的各种工具，整合成一份完整的出游方案。

![](https://pic.yupi.icu/1/image-20260604164403560.png)

像我现在分析自己的产品数据时，就用数据库 MCP 让 AI 直接连接数据库查询数据，省得自己写 SQL 语句了。



### Skills - 给 AI 装技能包

Skills 你可以理解为给 AI 提供的技能包，装了某个技能后，AI 在遇到相关任务时就能自动按照这套方法来干活，不用你每次都写一大堆提示词。而且技能是按需加载的，只有任务匹配时才会调用，不会浪费上下文空间。

![](https://pic.yupi.icu/1/04_Agent_Skills%E6%8A%80%E8%83%BD%E5%8C%85%E6%B8%90%E8%BF%9B%E5%BC%8F%E6%8A%AB%E9%9C%B2_original_v2%E5%A4%A7.jpeg)

比如 AI 编程时常用的几个技能，用于联网搜索的 Firecrawl、用于获取最新技术文档的 Context7、用于美化前端页面的 UI UX Pro Max 等等。

安装技能很简单，以 Firecrawl 为例，直接到官网复制一行安装命令，打开终端执行，按照指引完成授权就好。

![](https://pic.yupi.icu/1/image-20260604164539466.png)

安装完成后，在对话中输入 `/firecrawl` 就能调用：

```plain
/firecrawl 鱼皮的 AI 导航有哪些资源？
```

你会发现，Firecrawl 目前比 Cursor 内置的网页搜索工具效果更好、搜索结果更全面。

![](https://pic.yupi.icu/1/image-20260604164606348.png)

你还可以用 Cursor 内置的 `/create-skill` 命令来创建自己的技能。比如你刚做完一个网页总结工具，觉得这个流程以后还会重复用到，就可以让 AI 把这次的工作流程封装成技能，以后遇到类似任务就省事儿了。

![](https://pic.yupi.icu/1/image-20260604164634591.png)



### Rules - 约束 AI 的行为

用 Cursor 做项目的时候，你可能会发现 AI 生成的代码风格跟你的习惯不太一样。比如你希望注释用中文写，但 AI 老是写英文注释。

最简单的方式是在项目根目录创建一个 `AGENTS.md` 文件，用 Markdown 写上你希望 AI 遵守的规则：

```markdown
## 编码规范

- 所有代码注释使用中文
- 使用 TypeScript 而非 JavaScript
- 变量命名使用驼峰式（camelCase）
```

保存之后，AI 在当前项目中工作时就会自动遵循这些规则。

![](https://pic.yupi.icu/1/image-20260604164704104.png)

这个文件不是 Cursor 独有的，Claude Code、Codex 等主流 AI 编程工具都会读取它，写一份规则就能在多个工具间通用。

如果你需要更精细地控制规则在什么时候生效，Cursor 还有一套专门的规则系统。

在设置面板的 Rules 配置中，可以创建针对特定文件类型生效的规则，也可以让 AI 智能判断是否需要某条规则。

![](https://pic.yupi.icu/1/image-20260604164827576.png)

不过对于刚入门的同学来说，用 `AGENTS.md` 就完全够了。



## 5、进阶功能速览

到这里你已经掌握了 Cursor 日常使用中最核心的功能。

此外，Cursor 还有不少进阶能力，现在不需要深入学，知道有这些东西就行，做项目的时候遇到了再回来查。

1）Cloud Agent 云端智能体：前面我们用的 Agent 都是跑在自己电脑上的。

Cursor 还有一种 Cloud Agent，跑在云端服务器上，关掉电脑它也能继续工作，适合大规模代码重构这种耗时任务。你甚至可以在手机上打开网页，随时随地让 AI 干活和查看进度。

![](https://pic.yupi.icu/1/image-20260604165027452.png)

2）Automations 自动化：可以设置定时触发或者事件触发的自动化任务。比如让 AI 每天早上 9 点自动整理项目进度并生成报告，或者当 GitHub 仓库有人提交代码时自动做代码审查。

![](https://pic.yupi.icu/1/image-20260604165053532.png)

3）Marketplace 插件市场：Cursor 有自己的官方插件市场，里面有 Figma 设计稿转代码、AWS 云服务部署、Notion 知识库等各种插件，一键安装就能用。

![](https://pic.yupi.icu/1/image-20260604165114110.png)

4）代码索引：Cursor 会自动分析整个代码库建立语义索引，你在对话中就能快速检索到项目里任何角落的代码。这个能力很适合用来学习开源项目，用 Cursor 打开项目后让 AI 帮你分析整体架构。

![](https://pic.yupi.icu/1/image-20260604165222081.png)

5）Git 集成：Cursor 自带了 Git 操作面板，可以查看代码变更、提交记录、撤销修改，不用打开终端敲命令。

你现在不用深入学 Git，就把它当成代码的「后悔药」就好。

![](https://pic.yupi.icu/1/image-20260604165247952.png)

6）VS Code 扩展：由于 Cursor 是基于 VS Code 开发的，所以它兼容所有 VS Code 的扩展插件。你甚至还可以安装 Claude Code 插件和 Codex 插件，在同一个编辑器里使用多个 AI 编程工具。

![](https://pic.yupi.icu/1/image-20260604165333167.png)



如果你想跟着视频系统学习 Cursor 和多款 AI 编程工具的使用，并用 AI 从 0 做出多个完整的企业级项目，可以看看鱼皮最新上线的 [《小白都能学的 AI 编程实战》视频课](https://ai.codefather.cn/course/2087008226460565505)，有更完整的 Cursor 保姆级视频教程 + 多套企业级项目实战教程，手把手带你系统学习。



## 6、我的使用感受

最后再聊聊我使用 Cursor 的感受。

首先 Cursor 的功能非常全面，从代码补全、到 Agent 编程、到云端管理，AI 编程要用的能力它全都有。而且支持的模型多，Claude、GPT、Gemini 随便切，基于 VS Code 的插件也都能用。社区生态也很成熟，遇到问题容易找到解决方案。

不足的话，就是价格确实不便宜，Pro 套餐每月 20 美元，像我这种重度用户每月花费远不止这个数。不过对于认真做项目的人来说，这笔投资带来的效率提升是值得的。

由于 Cursor 的界面更新比较频繁，如果你看到的界面跟我的有些不一样，不用担心，核心的操作方式都是一样的，自己摸索摸索就好。

目前市面上类似的 AI 编辑器还有不少，但它们的核心操作方式都差不多，学完 Cursor 之后你再用其他工具也能游刃有余。



## 写在最后

以上就是 Cursor 从安装到实战的完整教程，涵盖了日常 AI 编程中最常用的功能和技巧。

学会了这些内容，你就能用 Cursor 独立完成从需求分析、代码开发到测试部署的全流程。

如果你想继续学习更多 AI 编程工具和实战技巧，可以阅读本教程编程工具板块的其他文章。